- 在日常开发工作中， 一个项目不止一个开发者， 但是每个人的代码质量、风格、格式规范肯定不一致，带来的影响是整个项目看上去比较零散、奇怪。那有没有方法使得所有人写出来的代码质量、风格一致呢？那就要使用 ESLint 进行质量检查和修复；使用 Prettier 进行美化、格式化，比如缩进、行的最大长度等等；在样式的编写中，大量的css和scss代码书写中，或多或少会出现问题，可以使用 StyleLint对样式代码进行格式化。以上俗称：静态代码分析。
一、ESlint 基本知识
1、概念
ESLint是一个插件化的javascript代码检测工具，它可以用于检查常见的JavaScript代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套ESLint配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。
2、使用方法
在开始使用ESLint之前，我们需要通过NPM来安装它：
1 |
|
创建一个 js 文件，如：test.js, 内容随意，但要能正常运行。
用 ESLint检查上述文件：
1 |
|
基本使用就是如此简单，后面说如何集成到项目中。
3、高级用法
1 |
|
–fix： 如果检查到问题，自动根据配置修改代码。
-e：排除检查文件夹。
-c：使用指定的 eslint 配置文件
二、Prettier 基本知识
1、概念
Prettier 是一个“有主见”的代码格式化工具，能够使输出代码保持风格一致。它通过解析代码和使用自定义规则重新打印代码，使得整个项目的代码格式一致。Prettier 支持多种语言，它的一大特点就是能够支持命令行、API 等多种形式调用，可以让团队保持代码风格一致。包括 React 在内的很多项目已经开始使用了。支持列表：
JavaScript，包括 ES2017
JSX
Flow
TypeScript
CSS、LESS 和 SCSS
JSON
- GraphQL
2、使用方法
在开始使用Prettier之前，我们需要通过NPM来安装它：
1 |
|
继续使用刚才创建的 test.js, 直接使用命令:
1 |
|
三、StyleLint 基本知识
1、概念
stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误。stylelint 由 PostCSS 提供技术支持，所以它也可以理解 PostCSS 解析的语法，比如 SCSS
基础用法
在开始使用StyleLint前，需要使用 NPM 安装：
1 |
|
创建一个样式文件， 如：style.less, 内容随意， 但需要正确。
直接使用命令:
1 |
|
- –syntax是指定语法， 可选为 sass 或 scss等。
四、在项目中 ESLint、 Prettier和 StyleLint
虽然 ESLint和 Prettier 在格式化代码方式确实有重叠的地方， 但两者的侧重点不一样。所有一般在项目中， 我习惯同时使用两者对项目代码进行检查和规范美化。
1、安装 ESLint 到 React项目
需要安装 的包如下：
1 |
|
babel-eslint是指需要检查 babel 转译后的代码。
在项目根目录创建配置文件 .eslintrc
对.eslintrc文件写入以下内容：
1 |
|
检查环境包括： es6、浏览器、nodejs 和 commonjs。
rules 的配置项可自行增减和修改，每个配置项的可选值一般为3个： off、warn 和 error
eslint 所有规则配置解读如下（值可修改）：
1 |
|
在 package.json的 scripts配置中增加命令
1 |
|
2、安装Prettier 到 react 项目
需要安装的包如下：
1 |
|
在项目根目录创建配置文件 .prettierc
写入内容：
1 |
|
主要配置了：缩进长度是2、单行长度是100、使用单引号等等。
在 package.json的 scripts配置中增加命令
1 |
|
3、安装 StyleLint 到 React 项目
需要安装的包
1 |
|
在项目根目录创建配置文件 .stylelintrc
写入内容：
1 |
|
在 package.json的 scripts配置中增加命令
1 |
|
该项目所有样式都是使用 LESS编写。
五、Pre-commit Hook 约束代码提交
上文探讨了 ESLint、Prettier和 StyleLint 在项目中的使用方法和配置文件的编写，这都是针对个人的推荐操作； 为了保证该项目所有的参与者都能统一代码风格， 则需要采用强制约束；假如团队使用 Git昨晚代码托管工具， 在 commit行为和之前进行代码约束， 以便代码质量和风格一致。因此可借助 Husky 和 lint-staged 来实现。
- Husky ：可以方便的让你通过npm scripts来调用各种git hooks。
- lint-staged ：利用git的staged特性，可以提取出本次提交的变动文件，让prettier只处理这些文件。
1、配置 npm 脚本命令
在项目的package.json中，配置pre-commit的hook任务：
1 | { |
至此，你的项目就可以支持自动检查和格式化了。即使团队中有人没有安装三种代码分析工具，也可以确保他的代码在提交到项目仓库中时，总是被检查修改和格式化了之后。
六、在编辑器配置ESLint、Prettier 和 StyleLint
上一部分说到在项目中集成了ESLint、Prettier 和 StyleLint三种代码分析工具， 但每一次还是要手动运行命令。如何能与编辑器（IDE)结合起来呢？以 WebStrom 为例：
1、在 WebStorm开启 ESLint
在 WebStorm 中，打开设置（File>Setting或者Alt+F7），按路径进入 ESLint 的配置界面（Languages&Frameworks>JavaScript>Code Quality Tools>ESLint）。开启 ESLint，并配置相应路径，配置文件默认使用.eslintrc。
2、在 WebStorm开启 Prettier
在macOS 上快捷键：Alt-Shift-Cmd-P； 在Windows and Linux上快捷键：Alt-Shift-Ctrl-P，可以用 Prettier格式化选中代码、整个文件或目录。
3、在 WebStorm开启 StyleLint
WebStorm天然支持stylelint。打开配置() Languages & FromeWorks > StyleSheets > Stylelint)只需在里面开启并配置安装包path即可。
六、总结
在使用上述三种代码分析工具后， 代码风格保持一致， 不用再为非业务逻辑代码而争吵， 提高工作效率。由于篇幅问题， 很多东西没有展开描述，可自行查询相关资料。